<template>
  <div class="app">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <h1>我的空间</h1>
        <ul class="nav-links">
          <li><a href="#">首页</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">项目</a></li>
          <li><a href="#">关于</a></li>
        </ul>
      </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h2>你好，我是开发者</h2>
          <p>全栈工程师 | 技术博主 | 开源贡献者</p>
          <div class="buttons">
            <a href="#" class="btn primary">查看博客</a>
            <a href="#" class="btn outline">联系我</a>
          </div>
        </div>
        <div class="hero-image">
          <img src="https://via.placeholder.com/400" alt="头像" />
        </div>
      </div>
    </section>

    <!-- 关于我 -->
    <section class="about section">
      <div class="container">
        <h3>关于我</h3>
        <p>
          我是一名热爱技术的全栈开发者，拥有5年以上Web开发经验。
          专注于Vue、Node.js和云计算技术。
        </p>
        <p>
          在日常工作中，我喜欢解决复杂问题并构建高效、用户友好的应用程序。
          业余时间我会写技术博客和参与开源项目。
        </p>
      </div>
    </section>

    <!-- 项目展示 -->
    <section class="projects section">
      <div class="container">
        <h3>精选项目</h3>
        <div class="project-list">
          <div v-for="(project, index) in projects" :key="index" class="project-card">
            <h4>{{ project.title }}</h4>
            <p>{{ project.desc }}</p>
            <div class="tags">
              <span v-for="tag in project.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <p>© {{ new Date().getFullYear() }} 我的个人空间. 保留所有权利.</p>
        <div class="socials">
          <a href="#">GitHub</a>
          <a href="#">LinkedIn</a>
          <a href="#">Email</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projects: [
        { title: '个人博客系统', desc: '基于Vue和Node.js构建的全功能博客平台', tags: ['Vue', 'Node.js', 'MongoDB'] },
        { title: '视频分享应用', desc: '支持上传和分享视频的Web应用', tags: ['Vue', 'Firebase', 'FFmpeg'] },
        { title: '任务管理工具', desc: '团队协作任务管理系统', tags: ['Vue', 'Vuex', 'Docker'] }
      ]
    };
  }
};
</script>